/* 
blur()：模糊图像 --- 将高斯模糊应用于输入图像。:filter: blur(5px);
brightness() ：让图像更明亮或更暗淡 --- 将线性乘法器应用于输入图像，以调整其亮度。值为 0% 将创建全黑图像；值为 100% 会使输入保持不变，其他值是该效果的线性乘数。如果值大于 100% 将使图像更加明亮。
contrast()：增加或减少图像的对比度 --- 值是 0% 将使图像变灰；值是 100%，则无影响；若值超过 100% 将增强对比度。
drop-shadow()：在图像后方应用投影 --- 使用 <shadow> 参数沿图像的轮廓生成阴影效果。阴影语法类似于 <box-shadow>（在 CSS 背景和边框模块中定义），但不允许使用 inset 关键字以及 spread 参数。与所有 filter 属性值一样，任何在 drop-shadow() 后的滤镜同样会应用在阴影上。:filter: drop-shadow(16px 16px 10px black);
grayscale()：将图像转为灰度图 --- 值为 100% 则完全转为灰度图像，若为初始值 0% 则图像无变化。值在 0% 到 100% 之间，则是该效果的线性乘数。
hue-rotate()：改变图像的整体色调 --- <angle> 值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。
invert()：反转图像颜色 --- 值为 100% 则图像完全反转，值为 0% 则图像无变化。值在 0% 和 100% 之间，则是该效果的线性乘数。
opacity()：改变图像透明度 --- 值为 0% 则使图像完全透明，值为 100% 则图像无变化。
saturate()：超饱和或去饱和输入的图像 --- 值为 0% 则是完全不饱和，值为 100% 则图像无变化。超过 100% 则增加饱和度。
sepia()：将图像转为棕褐色 --- 值为 100% 则完全是深褐色的，值为 0% 图像无变化。
*/
html.dark {
  filter: hue-rotate(30deg) grayscale(0.4);
}

html.cafe {
  filter: hue-rotate(215deg) opacity(0.8);
}

html.gray {
  filter: grayscale(1);
}
